import React, { Component, useCallback, useState } from 'react';
// todo  使用类组件或函数组件开发一个订单详情组件
// todo  1. 该组件有一个属性 orderId，能根据 orderId 的变化更新内容
// todo  2. 添加一个按钮能够刷新当前详情状态
// 可以用的现有的辅助工具：
// import { fetchOrderDetail } from '@/api';
// 用法：
//   fetchOrderDetail(orderId).then((orderData) => { /* orderData 订单详情数据 */ })
// import OrderDescriptions from './OrderDescriptions';
// 用法：
//   <OrderDescriptions orderData={orderData} /> // 渲染出一个订单描述信息的列表
// 以下是你的回答 在这里完成订单详情组件, 如果不会hooks，也可以写class
// import * as React from 'react';

export default function OrderDetail(props) {
  const [orderData, setOrderData] = useState(null);
  let timer;
  const fetchOrderDetail = () => {
    clearTimeout(timer);
    let list = [
      { id: 1, text: 'aaa' },
      { id: 2, text: 'bbb' },
      { id: 3, text: 'ccc' },
      { id: 4, text: 'ddd' },
      { id: 5, text: 'eee' },
      { id: 6, text: 'fff' },
      { id: 7, text: 'ggg' },
      { id: 8, text: 'hhh' },
      { id: 9, text: 'iii' },
      { id: 10, text: 'jjj' },
    ];
    let orderId = Math.ceil(Math.random() * 10);
    timer = setTimeout(() => {
      let result = list.find((item) => {
        return item.id == orderId;
      });
      setOrderData(result?.text);
    }, 3000);
    return 'loading';
  };
  const OrderDescriptions = (props) => {
    const { orderData } = props;
    return <div style={{ fontSize: '20px' }}>{orderData}</div>;
  };
  /* ------------ 答案区间开始--------------------- */
  const refresh = useCallback(() => {
    setOrderData(fetchOrderDetail());
  });
  /* ------------ 答案区间结束--------------------- */
  return (
    <>
      <OrderDescriptions orderData={orderData} />
      {/* 下面的onClick1 更正为 onClick */}
      <button onClick={refresh}>刷新</button>
    </>
  );
}
